<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="24">
        <a-col :span="24" style="margin-bottom: 20px;">
          <a-select show-search
                    allowClear
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    style="width: 200px;margin-right: 20px;"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange" v-model="deviceId" placeholder="请选择巡检设备">
            <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
            </a-select-option>
          </a-select>
          <a-select v-model="inspectionStatus" allowClear placeholder="巡检状态" style="width: 200px;margin-right: 20px;">
            <a-select-option value="0">正常</a-select-option>
            <a-select-option value="1">异常</a-select-option>
          </a-select>
          <a-date-picker @change="onChange" v-model="startTime" style="width: 200px;margin-right: 20px;"/>
          <a-button type="primary" @click="search" style="background: #3C67F1;border: none;">查询</a-button>
        </a-col>
      </a-col>
      <a-col :span="12" style="margin-bottom: 15px;">
        <a-button type="primary" style="margin-right: 10px;background: #3C67F1;border: none;" @click="diaryBtn">填写巡检日记
        </a-button>
        <a-button @click="calendarBtn">巡检日记</a-button>
      </a-col>
      <a-col :span="12" style="text-align: right;margin-bottom: 15px;">
        <a-button icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" @click="exportXlsBtn('设备巡检')" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table rowKey="id" :pagination="false" :loading="loading" :columns="columns" :data-source="data" bordered>
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
          <span slot="faultReason" slot-scope="text" style="display: flex">
            <img style="margin-right: 5px"
                 :src=" text == 0 ? require('../../../assets/icon/zc.png') : require('../../../assets/icon/yc.png') ">
            {{ text == 0 ? '正常' : '异常' }}</span>
          <span slot="handleWay" slot-scope="text">
            {{ text == 0 ? '解决' : '未解决' }}</span>
          <div slot="operation" slot-scope="text">
            <a-button type="primary" @click="detailBtn(text)" style="background: #3C67F1;border: none;">详情</a-button>
          </div>
        </a-table>
        <a-pagination
          style="float: right;margin-top: 20px"
          v-model="pageNo"
          :total="total"
          :page-size="pageSize"
          @change="onShowSizeChange"
        >
        </a-pagination>
      </a-col>
    </a-row>
    <InspectionDiary ref="InspectionDiary"></InspectionDiary>
  </div>
</template>
<script>
// 引入混入封装方法
import getAlls from './getAll'
import InspectionDiary from './InspectionDiary'
import {list, aliyunDeviceInspection,query} from '@/api/device.js'
import {exportXls} from '@/api/meteorological'
import getAll from "@views/wfinfo/management/getAll";

const columns = [
  {
    title: '序号',
    scopedSlots: {customRender: 'index'},
    key: 'name',
    width: 80,
  },
  {
    title: '设备编号',
    dataIndex: 'id',
    width: 200
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    ellipsis: true
  },
  {
    title: '巡检开始时间',
    dataIndex: 'startTime',
    ellipsis: true
  },
  {
    title: '巡检结束时间',
    dataIndex: 'endTime',
    ellipsis: true
  },
  {
    title: '巡检状态',
    dataIndex: 'faultReason',
    scopedSlots: {customRender: 'faultReason'},
    ellipsis: true
  },
  // {
  //   title: '处理结果',
  //   dataIndex: 'handleWay',
  //   scopedSlots: {customRender: 'handleWay'},
  //   ellipsis: true
  // },
  {
    title: '上报人员',
    dataIndex: 'createBy',
    ellipsis: true
  },
  {
    title: '巡检内容',
    dataIndex: 'inspectionContent',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'id',
    key: 'operation',
    scopedSlots: {customRender: 'operation'}
  }
]

export default {
  mixins: [getAlls],
  data() {
    return {
      data: [],
      columns,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: true,
      inspectionStatus: undefined,
      startTime: '',
      exportUrl: '/fabr/fabrDeviceInspection/exportXls'
    }
  },
  components: {
    InspectionDiary
  },
  mounted() {
    this.dataList(this.pageNo, this.pageSize, this.deviceId, this.startTime, this.inspectionStatus)
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    onChange(date, dateString) {
      this.startTime = dateString
    },
    // 搜索
    search() {
      console.log(this.inspectionStatus)
      this.loading = true
      aliyunDeviceInspection(this.pageNo, this.pageSize, this.deviceId, this.startTime, this.inspectionStatus,).then(res => {
        this.data = res.result.records
        this.loading = false
        this.$message.success('查询成功');
      }).catch(err => {
        this.loading = false
      })
    },
    // 分页
    onShowSizeChange(pageNo, pageSize) {
      this.loading = true
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.dataList(this.pageNo, this.pageSize)
    },
    //  详情
    detailBtn(id) {
      this.$refs.InspectionDiary.title = '详情'
      this.$refs.InspectionDiary.modal2Visible = true
      this.$refs.InspectionDiary.init(id)
    },
    // 数据列表
    dataList(pageNo, pageSize) {
      this.loading = true
        aliyunDeviceInspection(pageNo, pageSize).then(res => {
        this.data = res.result.records
        this.total = res.result.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
      query().then(res => {
        console.log(res)
        this.list = res.result
      }).catch(err => {
      })
    },
    diaryBtn() {
      this.$refs.InspectionDiary.title = '新增设备'
      this.$refs.InspectionDiary.modal2Visible = true
      this.$refs.InspectionDiary.init()
    },
    //  巡检日历
    calendarBtn() {
      this.$router.push('/wfinfo/management/patrolCalendar')
    },
  }
}
</script>